<template>
  <!-- top -->
  <section class="header_top">
    <div class="header_top_l">
      <img class="custom_avator" src="@/assets/chatDetails/welcome.png" alt="" />
      <div class="custom_desc">
        <div class="custom_desc_title">消息存档</div>
        <div class="custom_desc_desc">
          企业微信会话存档，可以完整的保存员工和客户之间的所有对话，包括撤回删除的信息，并且提供自定义设置敏感词，一旦发生敏感操作，
          <br />系统自动即使出发预警，帮助商家做好企业风控
        </div>
      </div>
    </div>
    <!--开启-->
    <el-button type="primary" class="custom_intro" @click="go">去开通会话存档</el-button>
  </section>
  <!-- /top -->

  <!-- banner -->
  <div class="banner">
    <div class="title" style="">数据永久保存</div>
    <div class="banner_desc"> 在客和员工同意的情况下，合规存档员工聊天记录，支持关键词搜索等筛选，多维度查询消息</div>
    <div class="line"></div>
    <div class="title">多类型文件保存</div>
    <div class="banner_desc"> 文字、图片、音频、视频等多类型聊天记录，方便了解员工工作情况，进行企业财务往来管理</div>
    <div class="line"></div>
    <div class="title">功能说明</div>
    <ul class="banner_desc d">
      <!-- <i class="customCircle"></i> -->
      <div style="display: flex">
        <div style="width: 6px; height: 6px; background-color: #ff6b00; border-radius: 50%"></div>
        <li style="margin-bottom: 16px; margin-top: -5px; margin-left: 6px">企业可设置服务会话内容存档的成员范围，开启后，经告知成员，企业可获取成员的沟通内容。</li>
      </div>
      <div style="display: flex">
        <div style="width: 6px; height: 6px; background-color: #ff6b00; border-radius: 50%"></div>
        <li style="margin-bottom: 16px; margin-top: -5px; margin-left: 6px">在与外部联系会话中，经外部联系人同意后，企业可以获取外部联系人得沟通内容。</li>
      </div>
    </ul>
  </div>
  <!-- <el-card class="box-card">
    <div class="title">数据消息存档</div>
  </el-card> -->

  <!-- /banner -->
</template>
<script setup lang="ts">
  import { reactive } from 'vue'
  import router from '@/router'
  // 跳转
  const go = () => {
    router.push({ path: '/channelconfig/qywechat/messagesave' })
  }
</script>

<style lang="scss" scoped>
  .header_top {
    padding: 20px;
    box-sizing: border-box;
    height: 132px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header_top_l {
      display: flex;
    }
    .custom_avator {
      width: 100px;
      height: 100px;
      margin-right: 25px;
    }
    .custom_intro {
      margin-left: 15px;
    }
    .custom_desc {
      .custom_desc_title {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 550;
        color: #33302d;

        // font-family: STHeitiSC-Medium, STHeitiSC;
        line-height: 21px;
        margin-bottom: 6px;
      }
      .custom_desc_desc {
        font-size: 14px;
        // font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #696969;
        line-height: 18px;
      }
    }
  }
  .banner {
    padding: 30px 20px;
    box-sizing: border-box;
    height: 737px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    .line {
      margin: 20px 0;
      border-bottom: 1px solid #d9d9d9;
    }
    .title {
      margin-top: 10px;
      font-size: 16px;
      // font-family: STHeitiSC-Medium, STHeitiSC;
      font-weight: 550;
      color: #33302d;
      line-height: 21px;
      margin-bottom: 6px;
    }
    .banner_desc {
      margin-top: 14px;
      font-size: 14px;
      // font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #696969;
      line-height: 18px;
      .d {
        position: relative;
      }
      // li {
      //   list-style-type: disc;
      //   margin-left: 8px;
      // }
    }
  }
</style>
